﻿<%@ page import="mvc.model.pojos.AddressBean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>确认订单</title>
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';
            src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot');
            src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot?#iefix') format('embedded-opentype'), url('${pageContext.request.contextPath}/static/css/font/iconfont.woff2') format('woff2'), url('${pageContext.request.contextPath}/static/css/font/iconfont.woff') format('woff'), url('${pageContext.request.contextPath}/static/css/font/iconfont.ttf') format('truetype'), url('${pageContext.request.contextPath}/static/css/font/iconfont.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/Payment-page.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/addr.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/Payment-page.js"></script>
</head>

<body>
<div>
    <!--顶部-->
    <div class="layout-header clearfix layout-header-order login" id="layoutHeader">
        <div class="mzcontainer">
            <!--魅族商标-->
            <div class="layout-header-logo">
                <a class="layout-header-logo-link" target="_blank">
                    <img src="${pageContext.request.contextPath}/static/img/1.png" style="max-width:125px;margin-top:28px;margin-left: 20px;" />
                </a>
            </div>
            <ul class="layout-header-bread">
                <li class="layout-header-bread-block ">
                    购物车
                </li>
                <li class="layout-header-bread-block active">
                    确认订单
                </li>
                <li class="layout-header-bread-block ">
                    在线支付
                </li>
                <li class="layout-header-bread-block ">
                    完成
                </li>
            </ul>
            <ul class="layout-header-right">
                <li class="layout-header-right-item">
                    <a class="layout-header-right-link" target="_blank">
                        我的订单
                    </a>
                </li>
                <li class="layout-header-right-item signout">
                    <a class="layout-header-right-link">
                        登录
                    </a>
                </li>
                <li class="layout-header-right-item signout">
                    <a class="layout-header-right-link" target="_blank">
                        注册
                    </a>
                </li>
                <li class="layout-member signin">
                    <a class="layout-member-link" target="_blank">
                        <span class="layout-member-username" id="topbarUser">${sessionScope.user.username}</span> 的商城
                        <i class="layout-member-triangle"></i>
                    </a>
                    <ul class="layout-member-downmenu">
                        <li class="layout-member-downmenu-item">
                            <a class="layout-member-downmenu-link" target="_blank">
                                地址管理
                            </a>
                        </li>
                        <li class="layout-member-downmenu-item">
                            <a class="layout-member-downmenu-link" target="_blank">
                                我的收藏
                            </a>
                        </li>
                        <li class="layout-member-downmenu-item" target="_blank">
                            <a class="layout-member-downmenu-link" target="_blank">
                                我的回购金
                            </a>

                        </li>
                        <li class="layout-member-downmenu-item" target="_blank">
                            <a class="layout-member-downmenu-link" target="_blank">
                                问题反馈
                            </a>
                        </li>
                        <li class="layout-member-downmenu-item" target="_blank">
                            <a class="layout-member-downmenu-link" target="_blank">
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!--中部样式-->
    <!--地址栏-->
    <div class="order">
        <div class="mzcontainer">
            <div class="order-address" id="addressModule">
                <div class="order-address-title">
                    收货人信息
                </div>

                <ul class="order-address-list clearfix" id="addressList" style="height: 174px;">
                    <!--修改后地址-->
                    <c:forEach items="${sessionScope.addrList}" var="addr">
                    <li anumber="${addr.anumber}" class="order-address-checkbox ${addr.isdefault==1?"checked":null}"
                        data-mdesc="收货人信息"
                        id="check-box">
                        <div class="order-address-checkbox-top">
                            <div class="order-address-checkbox-name" title="${addr.people}">${addr.people}</div>
                            <div class="order-address-checkbox-phone">${addr.phone}</div>
                        </div>
                        <div class="order-address-checkbox-content">${addr.province}${addr.city}${addr.county}${addr.village}${addr.addr}</div>
                        <div class="order-address-checkbox-checked" style="display: none;">
                            <div class="order-address-checkbox-tick"></div>
                            <div class="order-address-checkbox-ctrl" id="remove-check">
                                <div class="order-address-checkbox-delete">删除</div>
                                <div class="order-address-checkbox-edit">修改</div>
                            </div>
                        </div>
                    </li>
                    </c:forEach>
                    <!--默认地址-->

                    <!--新增地址-->
                    <li class="order-address-checkbox add" id="add-address">
                        <div class="order-add-icon iconfont">&#xe604;</div>
                        <div class="order-address-add-text">
                            添加新地址
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mzcontainer order-product">
                <div class="order-product-title">确认订单信息</div>
                <div class="order-product-list" id="orderProductList">
                    <table class="order-product-table" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <th class="order-product-table-name">
                                <div class="order-product-supplier">
                                    供应商：
                                    <span class="order-product-supplier-name">魅族</span>
                                </div>
                            </th>
                            <th class="order-product-table-price">单价</th>
                            <th class="order-product-table-num">数量</th>
                            <th class="order-product-table-total">小计</th>
                            <th class="order-product-table-express table-express-header">配送方式</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${sessionScope.cartChecked}" var="cart">
                        <tr>
                            <td class="order-product-table-name">
                                <a target="_blank" class="order-product-link" data-mdesc="确认订单信息">
                                    <img src="${pageContext.request.contextPath}/static/img/cg.png" style="vertical-align: middle;" />
                                </a>
                                <div class="order-product-name">
                                    <a target="_blank" class="order-product-link">
                                        <p class="order-product-name-item item-name">${cart.pname}</p>
                                        <p class="order-product-name-item cspu-desc">${cart.online == 0 ? "全网通公开版" : cart.online == 1 ? "移动" : cart.online == 2 ? "联通" : "电信"} ${cart.color} ${cart.rsize}+${cart.msize}GB</p>
                                    </a>
                                </div>
                            </td>
                            <td class="order-product-table-price">
                                <p>
                                    <span class="order-product-price">${cart.price}</span>
                                </p>
                            </td>
                            <td class="order-product-table-num">
                                ${cart.count}
                            </td>
                            <td class="order-product-table-total">
                                <p class="order-product-price red">
                                    ${cart.sum}
                                </p>
                            </td>
                            <td class="order-product-table-express" rowspan="999">
                                <p>
                                    快递配送：运费
                                    <span class="order-product-price red express-fee has-express-fee">
											0.00
										</span>
                                </p>
                                <div class="order-product-arrival"></div>
                            </td>
                        </tr>
                            <c:set var="s" value="${cart.sum+s}"/>
                        </c:forEach>
                        </tbody>
                        <tfoot>
                        <tr class="order-product-footer">
                            <td class="order-product-info" colspan="3">
                                <div class="order-product-invoice clearfix">
                                    <div class="order-product-invoice-type">
                                        发票类型：电子发票
                                        <div class="order-product-invoice-icon"></div>
                                    </div>
                                    <span class="order-product-invoice-edit">
											修改
										</span>
                                    <div class="order-product-invoice-info">
                                        <p>
                                            发票抬头：
                                            <span class="order-product-invoice-title">
                                                默认收货人姓名
												</span>
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td class="order-product-total" colspan="2">
                                合计：
                                <span class="order-product-price red total-has-express-fee">
										${s}
									</span>
                            </td>
                        </tr>
                        <tr class="order-product-remark">
                            <td colspan="5">
                                <span class="order-product-remark-title">备注：</span>
                                <textarea class="order-product-remark-input" maxlength="45"></textarea>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--确认支付-->
    <div class="order-total clearfix" id="orderTotal">
        <div class="order-total-content">
            <div class="order-total-row">

                总金额：
                <div class="order-total-price" id="totalOrderPrice">
                   ${s}
                </div>
            </div>
            <div class="order-total-row">

                运费
                <div class="order-total-price" id="totalExpressPrice">
                    0.00
                </div>
            </div>
            <div class="order-total-line"></div>
            <div class="order-total-row">

                应付：
                <div class="order-total-price total" id="totalPayPrice">
                    ${s}
                </div>
            </div>
            <div class="order-total-row order-total-valid-row clearfix">
                <div class="order-total-valid" id="validCode"></div>
                <div class="mz-btn success" id="submitForm" data-mdesc="下单并支付" data-mtype="store_se_pay">
                    下单并支付
                </div>
            </div>
            <!--<div class="order-total-row order-total-row-tips" id="totalTips"></div>-->
        </div>
    </div>
    <!--底部 -->
    <div class="meizu-footer">
        <div class="meizu-footer-link">
            <!--底部服务项目-->
            <div class="meizu-row">
                <ul class="meizu-footer-service">
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu49.png" />
                            <span>满80免运费</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu50.png" />
                            <span>100+ 城市次日送达</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu51.png" />
                            <span>7天无理由退货</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu52.png" />
                            <span>15天换货保障</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu53.png" />
                            <span>1年免费保修</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="${pageContext.request.contextPath}/static/img/meizu54.png" />
                            <span>上门快修</span>
                        </a>
                    </li>
                </ul>
                <div class="onlive-server">
                    <span>周一至周日 7:30-24:00</span>
                    <p class="tel">400-788-3333</p>
                    <a class="onlive-btn">在线客服</a>
                </div>
            </div>
            <!--服务项目划线-->
            <hr class="foot-hr" />
            <!--底部了解详情-->
            <div class="meizu-footer-co">
                <div class="meizu-row-row">
                    <div class="meizu-footer-info">
                        <div class="meizu-footer-info-left">
                            <ul class="clearfix">
                                <li>
                                    <a><span>了解魅族</span></a>
                                </li>
                                <li>
                                    <a><span>加入我们</span></a>
                                </li>
                                <li>
                                    <a><span>联系我们</span></a>
                                </li>
                                <li>
                                    <a><span>Flyme</span></a>
                                </li>
                                <li>
                                    <a><span>魅族社区</span></a>
                                </li>
                                <li>
                                    <a><span>天猫旗舰店</span></a>
                                </li>
                                <li>
                                    <a><span>问题反馈</span></a>
                                </li>
                                <li>
                                    <a><span>线上销售授权名单公示</span></a>
                                </li>
                                <li>
                                    <a><span>出版物经营许可证证</span></a>
                                </li>
                                <li>
                                    <a><span>简体中文</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="meizu-footer-certificate">
                ©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.
                <a>粤ICP备13003602号</a>
                <a>合字B2-20170010</a>
                <a>营业执照</a>
                <a>法律声明</a>
                <span>粤公网安备 44049102496009号</span>
                <a></a>
                <a></a>
                <a></a>
            </div>
            <div class="ii-subscribe">
                <a><img src="${pageContext.request.contextPath}/static/img/meizu115.png" /></a>
                <span class="li-hr"></span>
                <a><img src="${pageContext.request.contextPath}/static/img/meizu116.png"></a>
                <span class="li-hr"></span>
                <a><img src="${pageContext.request.contextPath}/static/img/meizu117.png"></a>
            </div>
        </div>
    </div>
    <!--修改地址弹窗-->
    <div class="mz-mask" id="mz-edit">
        <div class="mz-dialog dialog address-adder" style="margin-left: -380px; margin-top: -182px;">
            <div class="mz-dialog-header">
                <div class="mz-dialog-title">修改地址</div>
                <div class="mz-dialog-close" id="address-close-1"></div>
            </div>

            <div class="mz-dialog-main">
                <div class="mz-dialog-warp">
                    <div class="mz-dialog-content">
                        <div class="address-adder-content">
                            <div class="address-adder-row clearfix">
                                <div class="address-adder-title">
                                    收货人姓名
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp" data-tips="请输入收件人姓名！">
                                    <input type="text" class="mz-input address-adder-name" placeholder="姓名长度不超过15个文字" maxlength="15" />
                                </div>
                                <div class="address-adder-title">
                                    收货人手机号
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp">
                                    <input type="text" class="mz-input address-adder-phone" placeholder="请输入11位手机号" maxlength="11" />
                                </div>
                            </div>
                            <div class="address-adder-row clearfix">
                                <div class="address-adder-title">
                                    收货人地址
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp address-adder-select mz-address">
                                    <div class="mz-selectmenu">
                                        <input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="省份/直辖市" />
                                    </div>
                                    <div class="mz-selectmenu">
                                        <input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="城市" />
                                        <input type="hidden" tabindex="-1" />
                                    </div>
                                    <div class="mz-selectmenu">
                                        <input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="区/县" />
                                        <input type="hidden" tabindex="-1" />
                                    </div>
                                    <div class="mz-selectmenu">
                                        <input type="text" readonly="readonly" tabindex="-1" class="mz-downmenu-input" placeholder="乡镇/街道" />
                                        <input type="hidden" tabindex="-1" />
                                    </div>
                                    <div class="mz-address-other mz-input-warp" style="display: none;">
                                        <input type="text" class="mz-input mz-address-input" placeholder="请输入其他街道名称" maxlength="10" />
                                    </div>
                                </div>

                            </div>
                            <div class="address-adder-row clearfix">
                                <div class="address-adder-title">
                                    详细地址
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp">
                                    <input type="text" class="mz-input address-adder-detail" placeholder="请输入4-50个文字的详细地址，例如路名、门牌号" maxlength="50" minlength="4" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mz-dialog-bottom">
                <div class="mz-btn success" id="success-1">确认</div>
                <div class="mz-btn cancel" id="cancel-1">取消</div>
            </div>
        </div>
    </div>

    <!--修改地址-->
    <div class="mz-mask" id="mz-add">
        <div class="mz-dialog dialog address-adder" style="margin-left: -380px; margin-top: -182px;">
            <div class="mz-dialog-header">
                <div class="mz-dialog-title">添加新地址</div>
                <div class="mz-dialog-close" id="address-close-2"></div>
            </div>

            <div class="mz-dialog-main">
                <div class="mz-dialog-warp">
                    <div class="mz-dialog-content">
                        <div class="address-adder-content">
                            <div class="address-adder-row clearfix">
                                <div class="address-adder-title">
                                    收货人姓名
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp" data-tips="请输入收件人姓名！">
                                    <input type="text" class="mz-input address-adder-name" placeholder="姓名长度不超过15个文字" maxlength="15" />
                                </div>
                                <div class="address-adder-title">
                                    收货人手机号
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp">
                                    <input type="text" class="mz-input address-adder-phone" placeholder="请输入11位手机号" maxlength="11" />
                                </div>
                            </div>
                            <div class="address-adder-row clearfix">
                                <div class="address-adder-title">
                                    收货人地址
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp address-adder-select mz-address">
                                    <div class="mz-selectmenu">
                                        <input type="text" readonly="readonly" tabindex="-1"
                                               class="mz-downmenu-input province" placeholder="省份/直辖市" id="province"/>
                                    </div>
                                    <div class="mz-selectmenu">
                                        <input type="text" readonly="readonly" tabindex="-1"
                                               class="mz-downmenu-input city" placeholder="城市" id="city"/>
                                        <input type="hidden" tabindex="-1" />
                                    </div>
                                    <div class="mz-selectmenu">
                                        <input type="text" readonly="readonly" tabindex="-1"
                                               class="mz-downmenu-input county" placeholder="区/县" id="county" />
                                        <input type="hidden" tabindex="-1" />
                                    </div>
                                    <div class="mz-selectmenu">
                                        <input type="text"  tabindex="-1" class="mz-downmenu-input area" placeholder="乡镇/街道" />
                                        <input type="hidden" tabindex="-1" />
                                    </div>
                                    <div class="mz-address-other mz-input-warp" style="display: none;">
                                        <input type="text" class="mz-input mz-address-input" placeholder="请输入其他街道名称" maxlength="10" />
                                    </div>
                                </div>

                            </div>
                            <div class="address-adder-row clearfix">
                                <div class="address-adder-title">
                                    详细地址
                                    <span class="address-adder-must">*</span>
                                </div>
                                <div class="mz-input-warp">
                                    <input type="text" class="mz-input address-adder-detail" placeholder="请输入4-50个文字的详细地址，例如路名、门牌号" maxlength="50" minlength="4" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mz-dialog-bottom">
                <div class="mz-btn success" id="success-2">确认</div>
                <script>
                    $(function () {
                        $("#success-2").click(function () {

                        });
                    });
                </script>
                <div class="mz-btn cancel" id="cancel-2">取消</div>
            </div>
        </div>
    </div>
</div>
</body>

</html>